<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="css/style.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<style>
    body {
        background: url(bg.jpg) repeat;
        font-family: Arial Narrow, Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    
    header, section, footer {
        display: block;
    }
    
    header {
        width: 100%;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        color: #ccc;
        padding: 15px 0;
        letter-spacing: 1px;
        margin-bottom: 20px;
        position: relative;
    }
    
    header h1 {
        margin: 0 50px;
        text-shadow: 2px 2px 2px #888;
        float: left;
    }
    
    #backlinks {
        float: right;
        margin: -10px 20px;
        line-height: 25px;
        font-weight: bold;
        font-size: 12px;
        text-align: right;
    }
    
    #backlinks a {
        color: #ccc;
        text-decoration: none;
        margin: 3px 0 0;
        display: block;
    }
    
    #backlinks a:hover {
        color: #fff;
    }
    
    footer {
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.8);
        height: 25px;
        width: 100%;
        line-height: 25px;
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
        bottom: 0;
        left: 0;
        color: #888;
        font-size: 11px;
    }
    
    footer span {
        padding-left: 20px;
    }
    
    footer a {
        color: #1FA2E1;
    }
    
    #wrapper {
        width: 770px;
        margin: 0 auto;
        text-align: center;
    }
    
    #wrapper hgroup {
        margin: 20px 0;
        text-shadow: 1px 1px 1px #ccc;
    }
    
    #wrapper h1 {
        color: #146FA0;
        font-size: 42px;
        margin: 0;
    }
    
    #wrapper h2 {
        color: #71C1ED;
        font-size: 27px;
        margin: 0;
    }
    
    #lbl {
        color: #777;
        font-size: 17px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
        margin: 10px 0;
    }
    *:focus {
        outline: none;
    }
    
    label, input, textarea, fieldset {
        display: block;
    }
    
    fieldset#account, fieldset#personal {
        width: 250px;
        padding: 0 50px 50px;
        margin: 10px;
        float: left;
        background: rgb(244, 244, 244);
        background: rgba(244, 244, 244, 0.7);
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        border: 3px double #999;
    }
    
    fieldset#confirm {
        padding-top: 10px;
        clear: both;
        border: none;
        line-height: 15px;
        margin: 10px 0;
    }
    
    fieldset#confirm label, fieldset#confirm input {
        display: inline;
        float: left;
        margin: 15px 5px 0;
    }
    
    legend {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 5px;
        color: #999;
        margin-left: -20px;
        text-align: left;
        padding: 0 10px;
        text-shadow: 1px 1px 0 #ccc;
    }
    
    label {
        font-size: 17px;
        font-weight: bold;
        margin: 17px 0 7px;
        text-align: left;
        text-shadow: 1px 1px 0 #fff;
    }
    
    textarea {
        resize: both;
        max-width: 230px;
    }
    
    input.textbox, textarea {
        padding: 5px 10px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid #fff;
        width: 200px;
        text-shadow: 1px 1px 1px #777;
        -moz-box-shadow: 0px 2px 0px #999;
        -webkit-box-shadow: 0px 2px 0px #999;
        box-shadow: 0px 2px 0px #999;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        background: url(required.png) no-repeat 200px 5px #F0F0EF;
        background: -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ 
    background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 
    } 
    input.textbox:focus, textarea:focus{ 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    transform: scale(1.1); 
    -moz-box-shadow: 5px 3px 1px #ccc; 
    -webkit-box-shadow: 5px 3px 1px #ccc; 
    box-shadow: 7px 7px 2px #ccc; 
    text-shadow:1px 1px 3px #777; 
    } 
    input.textbox:required{ 
    background:url(required.png) no-repeat 200px 5px #F0F0EF; 
    background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ 
    background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 
    } 
    input.textbox:required:valid{ 
    background:url(valid.png) no-repeat 200px 5px #F0F0EF; 
    background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ 
    background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 
    } 
    input.textbox:focus:invalid, input.textbox:not(:required):invalid{ 
    background:url(invalid.png) no-repeat 200px 5px #F0F0EF; 
    background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */ 
    background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */ 
    background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */ 
    background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */ 
    background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */ 
    } 
    input[type=submit] { 
    padding:10px; 
    margin:0 10px !important; 
    width:300px; 
    } 
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
    input[type=range] {padding:0;} 
    } 
    #rangevalue{ 
    display:block; 
    text-align:right; 
    margin-top:-25px; 
    } 
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #aaa; 
    font-style:italic; 
    text-shadow:1px 1px 0 #fff; 
    } 
    input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #aaa; 
    font-style:italic; 
    text-shadow:1px 1px 0 #fff; 
    } 
    .clearfix{ 
    clear:both; 
    } 
</style>

</head> 
<body> 
<div id=wrapper> 
<div id=lbl></div> 
<form> 
<fieldset id=account> 
<legend>个人信息</legend> 
<label for=username>账号:</label> 
<input id=username class=textbox type=text name=username required placeholder="请填写账号" /> 
<label for=password1>密码:</label> 
<input id=password1 class=textbox type=password name=password1 required placeholder="请填写密码"/> 
<label for=password2>重复密码:</label> 
<input id=password2 class=textbox type=password name=password2 required placeholder="请重复密码"/> 
<label for=email>邮箱地址:</label> 
<input id=email class=textbox type=email name=email required placeholder="www.csdn.com" /> 
</fieldset> 
<fieldset id=personal> 
<legend>其他信息</legend> 
<label for=website>个人网址:</label> 
<input id=website class=textbox type=url name=website required placeholder="http://www.example.com" /> 
<label for=age>年龄:</label> 
<input id=age class=textbox type=number name=age min=18 step=2 pattern="[0-9]{1,3}" placeholder="填写年龄"> 
<label for=salary>月薪:</label> 
<input id=salary class=textbox type=range name=salary min=0 max=50000 step=500 pattern="[0-9]{2,}" placeholder="月薪几多" value=10000 onchange="showValue(this.value)" /> 
<span id=rangevalue>10000</span> 
<script> 
function showValue(value) { 
document.getElementById("rangevalue").innerHTML=value; 
} 
</script> 
<label for=description>描述:</label> 
<textarea id=description name=description cols=30 rows=5 placeholder="这里是详细描述"></textarea> 
</fieldset> 
<fieldset id=confirm> 
<input type=submit value="提交" /> 
<div class="clearfix"></div> 
</fieldset> 
</form> 
</div> 
</body> 
</html> 